<template>
  <div class="top-card-container">
    <div v-for="item in 4" :key="item" class="top-card-item">
        <div class="top-card-item-icon">
            <el-icon size="50px" color="#2A6F59"><List /></el-icon>
        </div>
        <div class="top-card-item-desc">
            <span>订单数量</span>
            <span>124394</span>
        </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
</script>
  
<style lang="less" scoped>
.top-card-container {
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  margin-top: 50px;
  .top-card-item {
    width: 23%;
    height: 200px;
    background-color: #232C3D;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    .top-card-item-icon {
        width: 100px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #2A3246;
    }
    .top-card-item-desc {
        display: flex;
        flex-direction: column;
        margin-left: 10px;
        span:nth-of-type(1) {
            color: #666F7A;
        }
        span:nth-of-type(2) {
            color: #fff;
            margin-top: 10px;
            font-size: 20px;
        }
    }
  }
}
</style>